<template>
	<view class="content">

		<view class="head">


			<view>当前新闻是</view>

			<view>
				<picker @change="examinationType" value="title" :range="examinationTypeArray">
					<label> =》 </label>
					<label> {{examinationTypeArrayType}}</label>
				</picker>
			</view>
           <view @click="aaa"> 刷新</view>
			<view @click="selectSearch()">+新增内容＋</view>
		</view>
		<view class="channel-post" v-if="show">
			<view class="aaa">
			
			<view class="view-title-1">
				<text>请输入内容标题:</text>
				<input type="text" focus v-model="channel" />
			</view>
			<view class="view-title-1">
				<text>请输入频道名称:</text>
				<input type="text" focus v-model="titles" />
			</view>
			<view class="view-title-1">
				<text>请输入内容详情:</text>
				<input type="text" focus v-model="content" />
			</view>
			<view class="view-title-1">
				<text>请输入发布时间:</text>
				<input type="text" focus v-model="time" />
			</view>
			
			<button  @click="addnew" class="but1">添加</button>
			<button  @click="fanh" class="but2">返回</button>
		</view>
</view>

		<scroll-view scroll-y="true">
			<view class="index-list-item" v-for="(item,index) in xinwen">
				<view class="div">
					<view class="img">
						<image src="../../static/logo.png" mode=""></image>
					</view>
					<view class="head-text">
						<view>
							{{item.channel}}
						</view>
						<view>
							{{item.title}}
						</view>
						<view>
							{{item.content}}
						</view>
						<view>
							<button type="default" @tap="deletes(item.id)">删除</button>
						</view>
						<!-- <view>
							<uni-popup ref="alertDialog" type="dialog">
								<uni-popup-dialog cancelText="关闭" confirmText="删除" title="提示" content="是否删除？" @confirm="deletes"></uni-popup-dialog>
							</uni-popup>
						</view> -->
					</view>
				</view>
			</view>
		</scroll-view>

	</view>


</template>

<script>
	// import {
	// 	Toutiao
	// } from '../../common/api.js'
	import {
		xinwennr,
		xinwenpd,
		xinwenpost,
		xwdelete
	} from "../../common/api.js"
	export default {
		data() {
			return {
				title: "",
				show: false,
				xinwennr: [],
				examinationTypeArray: [],
				examinationTypeIndex: 0,
				examinationTypeArrayType: "",
				xinwenpdid: [],
				xinwen: [],
				channel: null,
				time: null,
				content: null,
				titles: null,
				deleteitem:''
			}
		},
		onLoad() {

			uni.request({
				url: `http://localhost:7062/api/News`,
				method: 'GET'
			}).then((res) => {

				this.xinwenpdid = res[1].data.result
				this.xinwen = this.xinwenpdid
				// console.log(555);
				console.log(this.xinwenpdid)
			})
			uni.request({
				url: 'http://localhost:7062/api/Chanel',
				complete: (res) => {
					let that = this
					res.data.result.forEach(x => {
						that.examinationTypeArray.push(x.title)
					})
				}
			})
			// uni.request({
			// 	url: `http://10.83.232.158:7062/api/News`,
			// 	method: 'GET'
			// }).then((res) => {
			// 	this.examinationTypeArray = res[1].data.result.title
			// 	console.log(this.examinationTypeArray)
			// })
			xinwennr()
		},
		methods: {
			aaa()
			{
				location.reload();
			},
			selectSearch() {

				if (this.show == true) {
					this.show = false;
				} else {
					this.show = true;
				}
			},
			examinationType(e) {
				console.log(e)
				this.examinationTypeIndex = e.target.value;
				if (this.examinationTypeIndex < 0)
					this.examinationTypeIndex = 0
				console.log(this.examinationTypeIndex);
				this.examinationTypeArrayType = this.examinationTypeArray[this.examinationTypeIndex]
				this.xinwen = []
				this.xinwenpdid.forEach(x => {
					if (x.title == this.examinationTypeArrayType)
						this.xinwen.push(x)
				})
			},
			addnew() {
				if(this.channel==null||this.titles==null||this.time==null||this.content==null){
					uni.showToast({
						title:'请输入内容',
						icon:'none',
						duration:1000
					});
					console.log('false')
				}
				else{
					xinwenpost(this.channel, this.titles,this.content,this.time );
					console.log("ok");
					location.reload();
				}
			},
			
			
			deletes(id){
				xwdelete(id);
				location.reload();
			},
		}
	}
</script>

<style>
	.content {
		width: 100%;
		height: 100%;
	}

	.head {
		width: 800rpx;
		height: 50rpx;
		display: flex;
		position: relative;
		border: 1rpx solid #333333;
	}

	.head view:nth-child(1) {
		position: absolute;
		left: 20rpx;
	}

	.head view:nth-child(2) {
		position: absolute;
		left: 190rpx;
		color: #007AFF;
	}

	.head view:nth-child(3) {
		position: absolute;
		right: 330rpx;
		color: blue;
	}
.head view:nth-child(4) {
		position: absolute;
		right: 80rpx;
		color: red;
	}


	.div {
		width: 800rpx;
		height: 250rpx;
		display: flex;
		position: relative;

		border: 1rpx solid #bebebe;
	}

	.img {
		width: 200rpx;
		height: 210rpx;
		margin: 0 auto;

	}

	.div image {
		width: 200rpx;
		height: 200rpx;
		position: absolute;
		left: 20rpx;
		top: 20rpx;
	}

	.head-text {

		width: 400rpx;
		height: 210rpx;
		position: absolute;
		left: 240rpx;
		top: 20rpx;

	}


	.head-text view:nth-child(1) {
		width: 200rpx;
		font-size: 34rpx;
		color: red;
		position: absolute;
		top: 20rpx;
		right: 180rpx;
		/* border: 1px solid #ddd; */
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.head-text view:nth-child(2) {
		position: absolute;
		width: 150rpx;
		left: 360rpx;
		top: 28rpx;
		font-size: 25rpx;
		/* border: 1px solid #ddd; */
		color: #a5a5a5;
	}

	.head-text view:nth-child(3) {
		width: 350rpx;
		height: 210rpx;
		position: absolute;
		top: 110rpx;
		font-size: 20rpx;
		color: #818181;
		white-space: normal;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.head-text view:nth-child(4) button {
		width: 120rpx;
		height: 80rpx;
		position: absolute;
		top: 110rpx;
		left: 330rpx;
		font-size: 30rpx;
		background-color: green;
		color: #00FF7F;
		
		white-space: nowrap;
		
	}
	.aaa{
		height: 600rpx;
		position: relative;
	}

	/* .view-title-1
	{
		 border: 1px solid #ddd; 
	} */
	.view-title-1 {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 60rpx;
	}

	.view-title-1 text {
		margin-right: 30rpx;
	}

	.view-title-1 input {
		border-bottom: #999999 solid 2rpx;
		padding-left: 10rpx;
		height: 60rpx;
		font-size: 30rpx;
		color: #3F536E;
	}
	.but1{
		display: flex;
		background-color: green;
		height: 90rpx;
		width: 130rpx;
		position: absolute;
		top: 480rpx;
		left: 140rpx;
		color: #00FF7F;
	}
	.but2{
		display: flex;
		background-color: green;
		height: 90rpx;
		width: 130rpx;
		position: absolute;
		top: 480rpx;
		left: 500rpx;
		color: #00FF7F;
	}
</style>
